<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>tree_d3 - 简洁代码版</title>
	<script src="d3/d3.v3.min.js" charset="utf-8"></script>
	<style>
		svg{width: 1200px;height: 800px;display: block;}
		/*svg{width: 10000px;height: 10000px;display: block;}*/
		path.link{stroke: #aaa;stroke-width: 1.5px;fill:transparent;}
		.node circle{fill:#fff;stroke:steelblue;stroke-width: 1.5px;}
	</style>
</head>
<body>
<svg></svg>
</body>
<script type="text/javascript">
var tree = d3.layout.tree()
			.size([600, 500])
//			.size([3000, 1500])
			.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });
d3.json("diy.json", function(error, root) {
//	var root2 = '{"name":"中国6","children":[{ "name":"浙江" , "children":[{"name":"杭州" },{"name":"宁波" },{"name":"温州" },{"name":"绍兴" }] },{ "name":"广西" , "children":[{"name":"桂林","children":[{"name":"秀峰区"},{"name":"叠彩区"},{"name":"象山区"},{"name":"七星区"}]},{"name":"南宁"},{"name":"柳州"},{"name":"防城港"}] },{ "name":"黑龙江","children":[{"name":"哈尔滨"},{"name":"齐齐哈尔"},{"name":"牡丹江"},{"name":"大庆"}] },{ "name":"新疆" , "children":[{"name":"乌鲁木齐"},{"name":"克拉玛依"},{"name":"吐鲁番"},{"name":"哈密"}]}]}';
//	var root3 = JSON.parse(root2);
	var nodes = tree.nodes(root);
	var links = tree.links(nodes);
//	console.log(nodes);
//	console.log(links);
//console.log(root3);
	var diagonal = d3.svg.diagonal().projection(function(d) { return [d.y, d.x]; });
	var svg = d3.select('svg').append('g').attr("transform", "translate(50,0)");
	var link = svg.selectAll(".link").data(links).enter().append("path").attr("class", "link").attr("d", diagonal);
	var node = svg.selectAll('.node').data(nodes).enter().append('g').attr('class','node').attr('transform',function (d) {return "translate(" + d.y + "," + d.x + ")";});
	node.append('circle').attr('r',5);
	node.append('text').attr("dx", function(d) { return d.children ? -8 : 8; }).attr("dy", 3).style("text-anchor", function(d) { return d.children ? "end" : "start"; })
		.append("a").attr('href',"https://www.baidu.com/").text(function(d) { return d.name; });
})
</script>
</html>
